<template>
  <div>
    <div style="font-size: 14px;font-weight: bold;color: red;text-decoration: underline;font-style: italic;">
      欢迎大家一起学习项目
    </div>

    <div style="font-size: 30px;margin-bottom: 20px">
      {{a}}  {{b}}
    </div>

    <div style="margin-bottom: 20px">
      {{data.a}}
      {{data.b}}
      {{data.c}}
      {{data.d}}
    </div>
  </div>

  <!--  v-model  双向绑定-->
  <div style="margin-bottom: 20px">
    <imput v-model="data.a" />
  </div>

  <div style="margin-bottom: 20px">
    <span style="color: red" v-if="data.name==='佩奇'">小猪佩奇</span>
    <span style="color: blue" v-if="data.name==='乔治'">小猪乔治</span>
    <span style="color: hotpink" v-else>小猪王武钊</span>
  </div>



  <div>
    <div @click="show(item)" v-for="item in data.arr"></div>
  </div>


  <select style="width: 200px">
    <option v-for="item in data.fruits" >{{item}}</option>
  </select>

  <div style="margin-bottom: 20px">
    <button @click="click">点我加好运</button>
  </div>

  <div style="margin-bottom: 20px">
    <div :style="data.box"></div>
    <div>
      <img :src="data.img"  alt="">
    </div>
  </div>


  <div>
    <el-button @click="()=>{console.log('按钮被点击了')}">按钮</el-button>
    <el-button @click="buttonclick" type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>


  <div style="margin-bottom: 20px">

    <el-icon :size="20">
      <Edit />
    </el-icon>

    <span style="margin-bottom: 30px">
      <el-icon :size="20" color="red" style="top:4px"><View /></el-icon>100
    </span>


    <el-button type="danger" :icon="Delete" circle />
    <!--    按钮或输入框里面使用图标需要导入  alt enter 或者手动-->

    <el-input
        v-model="data.a"
        style="width: 240px"
        placeholder="Type something"
        :prefix-icon="Search"
    />
  </div>
</template>




<!--vue3 必须写setup   但没有作用-->
<script setup>
import {reactive, ref,onMounted} from "vue";
import {Delete,Search} from "@element-plus/icons-vue";

const a = ref(1);
const b = ref("王三金爱打吃鸡");

const data  = reactive({
  a: 1111111,
  b: "王三金dddddd",
  c: "13333333",
  d: false,
  name: '',
  arr: [7,8,9],
  fruits: ['apple','banana','pear'],
  box: {
    width: '200px',
    height: '200px',
    background: 'red'
  },
  img: 'https://picsum.photos/200/300'
});


onMounted(()=>{
  console.log('加载完成');
})


const buttonclick = ()=>{
  alert('按钮被点击了');
}
const show =(value)=>{
  alert(value);
}


const click = ()=>{
  alert('好运加1');
}
</script>